<template>
<el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">提成项目重审</span>
    </template>
  </el-page-header>
    <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(51, 126, 204, 0.5);
    "
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ empName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
  </el-descriptions>
    <el-table
      :data="tableData"
      border
      style="width: 80%; 
	  margin: 20px auto;
	  border-radius: 8px;
	  box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
      :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
      <el-table-column prop="name" label="提成项目" ></el-table-column>
      <el-table-column prop="empName" label="员工姓名" width="200"></el-table-column>
      <el-table-column prop="target1" label="条目一" width="150" />
      <el-table-column prop="inTarget1"  label="/￥" width="100" />
      <el-table-column prop="target2" label="条目二" width="150" />
      <el-table-column prop="inTarget2" label="/￥" width="100" />
      <el-table-column prop="result" label="结算/￥" width="100" />
    </el-table>
	<div style="text-align: right;margin-right: 200px;margin-bottom: 20px;">总计：{{total}}￥</div>
    <el-button type="primary" @click="submitForm" class="button" style="margin-left:20px;">重审通过</el-button>
</template>

<script  setup>
import {ref, onBeforeMount, reactive,getCurrentInstance} from "vue";
import {getOneKpiList}from '@/api/empKpi'
import { useRoute } from 'vue-router'
import {reAddKpi} from "@/api/resultFourth"
import { ElMessage } from 'element-plus'

const route = useRoute();
let empId=route.query.empId;
let deptName=route.query.deptName;
let empName=route.query.empName;
let positionId=route.query.positionId;
let position=route.query.position;
let type=route.query.type 

const tableData=ref([])
var total=0
onBeforeMount(()=>{
let empId=route.query.empId;
let positionId = route.query.positionId;
    getOneKpiList({empId,positionId})
    .then(data=>{
		for(var i = 0 ;i <data.data.length;i++){
			total += data.data[i].result
		}
		total = total.toFixed(2)
        tableData.value=data.data;
    });
})

const { proxy } = getCurrentInstance();
const goback=()=>{
  proxy.$router.go(-1)
}

const submitForm = () => {
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
let empId=route.query.empId;
let positionId = route.query.positionId;
  let positionType=route.query.type
  reAddKpi({empId, assessorId, positionId, positionType})
  .then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        goback()
      } else {
        ElMessage.error("提交成功");
      }
    }
  );
};
</script>
<style scoped>
.button{
        width: 120px;
        height: 40px;
        margin: 10px 130px;
        float: right;
    }
    :deep(.my-label) {
  background: rgba(51, 126, 204, 0.2) !important;
  color: rgb(51, 126, 204) !important;
  border: #337ecc 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(51, 126, 204, 0.9) !important;
  border: #337ecc 2px solid !important ;
}
</style>
